<template>
    <el-row :gutter="20">
        <el-col class="cardCol" :xs="12" :sm="6" :md="6"  v-for="tl in TodayList" :key="tl.rid">
            <el-card :body-style="{ padding: '0px' }">
                <router-link class="imgBox" :to="{name: 'Itemlist', params: {foodId: tl.cookbook.cbid}}" target="_blank">
                     <img :src="tl.cookbook.finalcook" class="image">
                </router-link>
                <div class="inner" style="padding: 15px;text-align:center">
                  <router-link class="title" :to="{name: 'Itemlist', params: {foodId: tl.cookbook.cbid}}" target="_blank" >{{tl.cookbook.cbname}}</router-link>

                <div class="bottom clearfix">
                  <span><label class="el-icon-view"></label> {{tl.cookbook.pageview}}</span>
                  <span><label class="el-icon-star-on"></label> {{tl.staroffs.length}}</span>
                </div>
                </div>
          </el-card>
        </el-col>
    </el-row>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    //选项 / 数据
    return {
      TodayList: []
    }
  },
  methods: {
    //事件处理器
  },
  components: {
    //定义组件
  },
  async created () {
    //生命周期函数
    //今日推荐的菜谱
    var url = '/api/consumer-index/index_consumer/getCookBookForIndex'
    axios.get(url).then(res => {
      console.log(res.data)
      this.TodayList = res.data
    })
  }
}
</script>

<style>
.cardCol {
  margin-bottom: 20px;
}

.inner {
  position: relative;
  /*text-align: center;*/
}
.imgBox {
  width: 100%;
  height: 200px;
  cursor: pointer;
  display: block;
  border-radius: 4px;
}
.image {
  /*max-width: 100%;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*display: inline-block;*/
  /*display: block;*/
}
.title {
  cursor: pointer;
  font-size: 16px;
  color: #333;
}
</style>
